<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p><code>&lt;md-contact-chips&gt;</code> is an input component based on <code>md-chips</code> and makes use of an
<code>md-autocomplete</code> element. The component allows the caller to supply a query expression which
returns  a list of possible contacts. The user can select one of these and add it to the list of
chips.</p>
<p>You may also use the <code>md-highlight-text</code> directive along with its parameters to control the
appearance of the matched text inside of the contacts&#39; autocomplete popup.</p>

</div>


<div>
  

  

  
  <section class="api-section">
    <h2 id="Usage">Usage</h2>
  
    <hljs lang="html">
  <md-contact-chips
      ng-model="ctrl.contacts"
      md-contacts="ctrl.querySearch($query)"
      md-contact-name="name"
      md-contact-image="image"
      md-contact-email="email"
      placeholder="To">
  </md-contact-chips>
</hljs>
  
  </section>
  
  <div class="api-param-section">
    <h2>
      
        Attributes
      
    </h2>
    <div class="api-param-table">
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* ng-model</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code><code class="api-type label type-hint type-hint-object">object</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code><code class="api-type label type-hint type-hint-object">object</code></td>
        <td class="description">
          <p>A model to bind the list of items to</p>

          
        </td>
      </tr>
    
  
    
  
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* md-contacts</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>An expression expected to return contacts matching the search
   test, <code>$query</code>. If this expression involves a promise, a loading bar is displayed while
   waiting for it to resolve.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* md-contact-name</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>The field name of the contact object representing the
   contact&#39;s name.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* md-contact-email</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>The field name of the contact object representing the
   contact&#39;s email address.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* md-contact-image</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>The field name of the contact object representing the
   contact&#39;s image.</p>

          
        </td>
      </tr>
    
  
    
  
  
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          placeholder
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Placeholder text that will be forwarded to the input.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          secondary-placeholder
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Placeholder text that will be forwarded to the input,
   displayed when there is at least on item in the list</p>

          
        </td>
      </tr>
    
  
    
  
    
  
    
  
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          filter-selected
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>Whether to filter selected contacts from the list of
   suggestions shown in the autocomplete. This attribute has been removed but may come back.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

    </div>
  </div>
  


  
</div>


</div>
